<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <title>交流讨论</title>
  <style>
    body {
       font-family: Arial;
    }
    a{
        border-radius: 20px;
       background-color:#00aaff ;
    	color:black;
    	font-size: 20px;
    	text-decoration: none;
    	margin: 20px;
    	line-height: 50px;
    }
    a:hover{
    	text-decoration: underline;
    }
    #message-container {
      height: 200px;
      overflow-y: scroll;
      border: 1px solid #ccc;
      padding: 10px;
    }
    
    #message-container p {
      margin: 0;
      padding: 0;
    }
    
    #message-form {
	 margin: 0 30px 15px;
	 font-weight: 300;
      margin-top: 20px;
	  background-color: aliceblue;
    }
    #message-form input[type="text"] {
      width: 80%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
    }
    
    #message-form input[type="submit"] {
      width: 18%;
      padding: 10px;
      font-size: 16px;
      color: #fff;
      background-color: #428aca;
      border: none;
      cursor: pointer;
    }
	
  </style>
</head>
<body background="背景.jpg">
	<a href="课程学习.html">课程学习</a>
  <h1>在线交流平台</h1>
  <form id="message-form">
    <input type="text" id="message-input" placeholder="请输入问题...">
    <input type="submit" value="提交问题">
  </form>
  <h2>答疑内容</h2>
  <div id="message-container"></div>
  <script>
    var messageContainer = document.getElementById('message-container');
    var messageForm = document.getElementById('message-form');
    var messageInput = document.getElementById('message-input');
    
    messageForm.addEventListener('submit', function(event) {
      event.preventDefault();
      
      var message = messageInput.value;
      
      if (message) {
        var messageParagraph = document.createElement('p');
        messageParagraph.textContent = message;
        messageContainer.appendChild(messageParagraph);
        
        messageInput.value = '';
      }
    });
  </script>
</body>

</html>  
